<template>
  <div>
    <a-card :bordered="false" style="height:100%">
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="$refs.modal.add()">添加</a-button>
      </div>
      <a-table
        class="components-table-demo-nested"
        ref="table" 
        :columns="columns" 
        :row-key="record => record.id" 
        :data-source="data" 
        :pagination="pagination" 
        :loading="loading" 
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <template>
            <a-popconfirm
              title="是否删除该条记录?"
              @confirm="confirm(record)"
              @cancel="cancel"
              okText="是"
              cancelText="否"
            >
              <a href="#">删除</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="handleEdit(record)">编辑</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="handlePreEdit(record)">设置</a>
          </template>
        </span>
      </a-table>
    </a-card>
    <performance-setting-modal ref="modal" @ok="handleOk"></performance-setting-modal>
    <performance-detail-modal ref="modal1" ></performance-detail-modal>
      
  </div>

</template>

<script>
   import PerformanceSettingModal from './modules/PerformanceSettingModal'
  import PerformanceDetailModal from './modules/PerformanceDetailModal'
  
  import {
    getUrl,
    postAxiosUrl
  } from '@/api/manage'

  export default {
    components: {
      PerformanceSettingModal,
      PerformanceDetailModal
    },
    data() {
      return {
        data: [],
        pagination: {size:'small'},
        loading: false,
        columns: [{
            title: '父级名称',
            dataIndex: 'sedName'
          },
          {
              title: '编码',
              dataIndex: 'code'
          },
          {
              title: '名称',
              dataIndex: 'name'
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' }
          }
        ]
      }
    },
    created() {
      this.fetch()
    },
    methods: {
      handleOk(){
        this.pagination.current = 0
          this.fetch()
      },
      handleSubMenu(record) {
          this.$refs.modal.addSubMenu(record)
      },
      handleEdit (record) {
          this.$refs.modal.edit(record)
      },
      handlePreEdit (record) {
          this.$refs.modal1.show(record)
      },
      handleTableChange(pagination, filters, sorter) {
        console.log(pagination)
        const pager = { ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          sortField: sorter.field,
          sortOrder: sorter.order,
          ...filters,
        })
      },
      fetch(params = {}) {
        console.log('params:', params)
        this.loading = true
        var _this = this
        params.settingType = '0'
        return getUrl('cutSedSetting/getAll', params)
          .then(data => {
            
            const pagination = { ...this.pagination
            }
            // Read total count from server
            pagination.total = data.result.totalCount
            pagination.showTotal = total => `共 ${total} 条`
            pagination.showQuickJumper = true
            this.loading = false
            this.data = data.result.data
            this.pagination = pagination

          })
      },
      confirm (record) {
        const me = this
              postAxiosUrl('cutSedSetting/del', {id : record.id})
                .then(res => {
                  me.fetch()
                })
      },
      cancel(e) {
      },
    }
  }
</script>
<style>
</style>
